<template>
	<Container>
		<view class="header">
			<view
				class="article"
				@tap="tap(item, index)"
				:class="{ error: chooses[index] === 'error' }"
				v-for="(item, index) in assignment.optionArticles"
				:style="{ width: articleStyle[index].width, height: articleStyle[index].height, left: articleStyle[index].left, top: articleStyle[index].top }"
				:key="index"
			>
				<view hover-class="touch" hover-stay-time="300" :class="{ touched: chooses[index] === 'select' }">
					<image class="image" :src="item.imageUrl" mode="aspectFit"></image>
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
			<image
				v-if="isPoint"
				class="pointTouch img"
				:class="{ pointAnimation: pointAnimation }"
				:style="{ left: articleStyle[pointCurrent].pLeft, top: articleStyle[pointCurrent].pTop }"
				src="../../../static/pointTouch.png"
				mode="widthFix"
			></image>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	data() {
		return {
			pointCurrent: -1,
			articleStyle: [
				{ width: '25%', height: '25%', left: '0%', top: '0%', pLeft: '13%', pTop: '18%' },
				{ width: '40%', height: '25%', left: '25%', top: '0%', pLeft: '50%', pTop: '18%' },
				{ width: '35%', height: '30%', left: '65%', top: '0%', pLeft: '85%', pTop: '23%' },
				{ width: '40%', height: '35%', left: '0%', top: '25%', pLeft: '25%', pTop: '52%' },
				{ width: '25%', height: '50%', left: '40%', top: '25%', pLeft: '55%', pTop: '65%' },
				{ width: '35%', height: '40%', left: '65%', top: '30%', pLeft: '85%', pTop: '60%' },
				{ width: '40%', height: '40%', left: '0%', top: '60%', pLeft: '25%', pTop: '90%' },
				{ width: '30%', height: '25%', left: '40%', top: '75%', pLeft: '60%', pTop: '90%' },
				{ width: '30%', height: '30%', left: '70%', top: '70%', pLeft: '86%', pTop: '90%' }
			],
			pointTouch: [{ left: '35%', top: '40%' }, { left: '70%', top: '40%' }, { left: '35%', top: '80%' }, { left: '70%', top: '80%' }],
			isPoint: true,
			interval: null,
			pointAnimation: false
		}
	},
	watch: {
		questionPress: function(bool) {
			if (bool) {
				clearInterval(this.interval)
				this.pointCurrent = -1
				this.isPoint = true
			} else {
				const optionArticles = this.assignment.optionArticles.map((item, index) => {
					item.current = index
					return item
				})
				const article = optionArticles.filter(item => {
					return item.serialIndex >= 0
				})
				let count = -1
				this.interval = setInterval(() => {
					if (count === article.length - 1) {
						clearInterval(this.interval)
						this.isPoint = false
						return
					}
					count++
					article.map(item => {
						if (item.serialIndex === count) {
							this.pointCurrent = item.current
						}
					})
					this.pointAnimation = false
					const timer1 = setTimeout(() => {
						this.touchAudio()
					}, 200)
					const timer2 = setTimeout(() => {
						this.pointAnimation = true
					}, 400)
					this.$once('hook:beforeDestory', function() {
						clearTimeout(timer1)
						clearTimeout(timer2)
					})
				}, 1800)
			}
		}
	},
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			if (this.isPoint) return
			if (this.choosesKey.indexOf(index) > -1) return
			this.optionStatus('select', index)
			this.choosesKey.push(index)
			const optionArticles = this.assignment.optionArticles.map((item, index) => {
				item.current = index
				return item
			})
			const article = optionArticles.filter(item => {
				return item.serialIndex >= 0
			})
			if (this.choosesKey.length === article.length) {
				let count = 0,
					number = []
				this.choosesKey.map(() => {
					optionArticles.map(item => {
						if (item.serialIndex === count) {
							count++
							number.push(item.current)
						}
					})
				})
				const bool = this.choosesKey.join('') === number.join('')
				if (!bool) {
					this.selected = this.choosesKey.map(item => {
						this.optionStatus('error', item)
					})
				}
				this.$parent.next({
					isSure: bool
				})
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	position relative
	perspective 1000rpx
	.article
		display flex
		justify-content center
		align-items center
		position absolute
		view
			width 90%
			height 90%
			display flex
			justify-content center
			align-items center
			background #FFE5A6
			border 8rpx solid white
			box-sizing border-box
			border-radius 40rpx
			box-shadow 1rpx 1rpx 5rpx #C4C4C4
			transition all 0.3s
			.image
				width 80%
				height 80%
	.pointTouch
		position absolute
		width 80rpx
		top 130%
		left 45%
		transition all 0.4s
.touched
	background #FF8C69 !important
.pointAnimation
	animation pointAnimation 0.5s
@keyframes pointAnimation
	0%
		transform translate3d(0, 0, 0)
	50%
		transform translate3d(0, 0, 200rpx)
	100%
		transform translate3d(0, 0, 0)
</style>
